<template>
	<view class="work-detail-page page"
		:style="!disabled||(detail.process_status==2&&detail.is_comments==0)?'padding-bottom:150rpx':''">
		<CustomNav :isBack="true" :topBgColor="topBgColor" title="我的零活详情"></CustomNav>
		<view class="info-block block" :style="'margin-top:'+mt">
			<view class="head-info">
				<view class="work-type">{{valuationText.name}}</view>
				<view class="work-name">{{detail.name}}</view>
				<view class="btn-block" style="justify-content: flex-end;">
					<button open-type="share"
						style="margin: 0;	padding: 0;background: none;line-height: normal !important;">
						<view class="iconfont icon-a-fenxiang"></view>
					</button>
				</view>
			</view>
			<view class="start-time">开工日期：{{detail.startTime}}</view>
			<view class="label-block">
				<view class="label-item">{{detail.population}}人</view>
				<view class="label-item" v-if="detail.valuation==1">{{detail.duration}}天</view>
				<view class="label-item" v-else-if="detail.valuation==2">{{detail.duration}}小时</view>
				<view class="price">{{detail.price}}{{valuationText.unit}}</view>
			</view>
		</view>
		<view class="info-block block" style="margin: 30rpx auto;">
			<view class="title">工作地点</view>
			<view class="position-block">
				<view class="position">{{detail.address}}</view>
				<view @click="openNavigate" class="navigation">
					<view class="iconfont icon-a-dizhi1"></view>导航
				</view>
			</view>
		</view>
		<view class="info-block block">
			<view class="title">工作描述</view>
			<view class="describe">{{detail.content}}</view>
		</view>
		<view class="info-block block" style="margin: 30rpx auto;">
			<view class="title">联系电话</view>
			<view class="contact">
				<template v-if="detail.contactPhone">
					<view class="contact-name">{{detail.contactName}}</view>
					<view class="contact-phone">{{detail.contactPhone}}</view>
					<view @click="callPhone" class="call">
						<view class="iconfont icon-dianhua1"></view>拨打
					</view>
				</template>
				<view v-else class="empty">暂无联系方式</view>
			</view>
		</view>
		<view class="info-block block">
			<view class="title">工作环境及操作规范</view>
			<view class="image-block">
				<template v-if="detail.attachment.length>0">
					<image @click="viewImage(item)" v-for="(item,index) in detail.attachment" :key="index"
						class="image-item" mode="aspectFill" :src="item"></image>
				</template>
				<view v-else class="empty">暂无图片</view>
			</view>
		</view>
		<view @click="navigate('/page_other/department/detail?id='+detail.department.id)" class="info-block block"
			style="margin: 30rpx auto;display: flex;align-items: center;" v-if="detail.department">
			<image :src="detail.department.logo" class="company-photo"></image>
			<view class="company-info">
				<view class="company-name">{{detail.department?detail.department.name:''}}</view>
				<view class="evaluate">用工方评分 {{detail.department.employer_score||'暂无评分'}} · 零工方评分
					{{detail.department.workers_score||'暂无评分'}}
				</view>
			</view>
			<view class="iconfont icon-arrow-right"></view>
		</view>
		<view class="title FZHZGBJ" style="margin-top: 30rpx;padding-left: 30rpx;">
			申请零工列表（{{detail.workRob.length}}/{{detail.population}}）
		</view>
		<view v-if="detail.workRob.length>0" class="apply-list">
			<view @click="navigate('/page_other/user/user_view?id='+item.user.id)" class="apply-item block"
				v-for="(item,index) in detail.workRob" :key="index">
				<image class="user-photo" :src="item.user.avatar" mode="aspectFill"></image>
				<view class="info-block">
					<view class="name">{{item.user.name||''}}</view>
					<view class="score">评分：{{item.user.total_score||'暂无评分'}}</view>
				</view>
			</view>
		</view>
		<view v-else class="empty">暂无申请</view>
		<view class="bottom-btn-block">
			<view @click="submit" class="btn normal" v-if="!disabled">取消</view>
			<view
				@click="navigate('/page_other/evaluate/index?type=2&associated_id='+detail.department.id+'&work_id='+detail.id)"
				class="btn normal" v-if="detail.process_status==2&&detail.is_comments==0">评价</view>
		</view>

	</view>
</template>

<script>
	import {
		sendWorkDetail,
		cancelWork,
		applyList
	} from '@/api/work.js'
	export default {
		data() {
			return {
				id: null,
				topBgColor: 'rgba(0,0,0,0)',
				detail: {
					department: {
						logo: '',
						name: ''
					},
					name: '',
					population: 0,
					duration: 0,
					price: 0,
					address: '',
					describe: '',
					employer_score: 0,
					workers_score: 0,
					startTime: '',
					attachment: [],
					is_cancel: 0, //1可取消 0不可取消
					workRob: [],
					is_comments: 0,
				},
				disabled: false,
				imageList: []
			}
		},
		computed: {
			valuationText() {
				let obj = {}
				switch (this.detail.valuation) {
					case 1:
						obj = {
							name: '短期工',
							unit: '元/天'
						};
						break;
					case 2:
						obj = {
							name: '小时工',
							unit: '元/时'
						};
						break;
					case 3:
						obj = {
							name: '计件工',
							unit: '元/100件'
						};
						break;
					default:
						obj = {
							name: '短期工',
							unit: '元/天'
						};
				}
				return obj
			}
		},
		methods: {
			viewImage(url) {
				uni.previewImage({
					current: url,
					urls: this.imageList
				})
			},
			openNavigate() {
				uni.openLocation({
					latitude: this.detail.latitude * 1,
					longitude: this.detail.longitude * 1,
					name: this.detail.address
				})
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.detail.contactPhone
				})
			},
			getDetail() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				sendWorkDetail({
					id: this.id
				}).then(res => {
					res.attachment = res.attachment ? res.attachment.split(',') : [];
					this.disabled = res.is_cancel == 0 ? true : false
					this.detail = res;
				}).catch(() => {
					this.showToast('加载失败');
				})
			},
			submit() {
				if (this.disabled) {
					this.showToast('该零活不可取消');
					return;
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				cancelWork({
					id: this.detail.id,
					status: 0
				}).then(() => {
					this.disabled = true
					this.showToast('取消成功')
				}).catch(() => {
					uni.switchTab({
						url: '/pages/mine/index'
					})
				})
			}
		},
		onUnload() {
			uni.$off('completeComments')
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail()
			uni.$on('completeComments', () => {
				this.getDetail();
			})
		},
	}
</script>

<style lang="scss" scoped>
	.work-detail-page {
		overflow: hidden;
		overflow: hidden;
		background-image: $custom-background-gradient;

		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}

		.block {
			width: $content-width;
			background: #fff;
			border-radius: 12px;
			padding: 30rpx;
		}

		.info-block {
			margin: 0 auto;

			.head-info {
				width: 100%;
				display: flex;

				.work-type {
					width: 100rpx;
					border-radius: 4px;
					color: $orange-color;
					background: #E1E8F9;
					font-size: 24rpx;
					padding: 2px 7px;
					margin-right: 20rpx;
					text-align: center;
				}

				.work-name {
					width: calc(100% - 280rpx);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: auto;
					font-weight: bold;
				}

				.btn-block {
					width: 160rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btn-item {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.start-time {
				color: #767676;
				font-size: 28rpx;
				margin: 30rpx 0;
			}

			.label-block {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.label-item {
					border-radius: 16px;
					background: #E1E8F9;
					color: $orange-color;
					font-size: 24rpx;
					padding: 8rpx 26rpx;
					margin-right: 20rpx;
				}

				.price {
					font-weight: bold;
					font-size: 28rpx;
					margin-left: auto;
					color: $orange-color;
				}
			}

			.title {
				margin-bottom: 20rpx;
			}

			.position-block {
				display: flex;
				align-items: center;
				width: 100%;

				.position {
					width: calc(100% - 150rpx);
					margin-right: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.navigation {
					border-radius: 16px;
					border: 1px solid $orange-color;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 130rpx;
					height: 50rpx;
					font-size: 28rpx;
					color: $orange-color;

					.iconfont {
						font-size: 28rpx;
						margin-right: 6rpx;
					}
				}
			}

			.describe {
				line-height: 2;
			}

			.contact {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.contact-phone {
					width: 240rpx;
					margin-right: auto;
					margin-left: 20rpx;
					color: $orange-color;
				}

				.call {
					border-radius: 16px;
					border: 1px solid $orange-color;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 130rpx;
					height: 50rpx;
					font-size: 28rpx;
					color: $orange-color;

					.iconfont {
						font-size: 28rpx;
						margin-right: 6rpx;
					}
				}
			}

			.image-block {
				display: flex;
				flex-wrap: wrap;

				.image-item {
					width: calc((100% - 60rpx)/3);
					height: 200rpx;
					border-radius: 8px;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
				}

				.image-item:nth-child(3n) {
					margin-right: 0;
				}
			}

			.company-photo {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.company-info {
				width: calc(100% - 160rpx);
				display: flex;
				flex-direction: column;
				justify-content: center;

				.company-name {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.evaluate {
					color: #767676;
					margin-top: 20rpx;
					font-size: 28rpx;
				}
			}

			.icon-arrow-right {
				color: #999;
			}
		}

		.bottom-btn-block {
			display: flex;
			justify-content: center;
			position: fixed;
			transform: translate(-50%, -50%);
			left: 50%;
			bottom: 0;

			.btn {
				width: 300rpx;
				height: 80rpx;
				border-radius: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 20rpx;
			}

			.btn.normal {
				color: #fff;
				background: $orange-color;
			}
		}

		.apply-list,
		.title {
			//width: $content-width;
			margin: 0 auto;
		}

		.apply-list {
			margin: 30rpx auto;

			.apply-item {
				width: 100%;
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.user-photo {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}

				.info-block {
					width: calc(100% - 150rpx);
					margin-left: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.score {
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #767676;
					}
				}
			}
		}
	}
</style>